// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';

// antd 按需加载
import { Tabs, Toast, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { } from '../../module/module.js'
import * as ActionTypes from '../../constants/constants.js';

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, CacheImage, Layout } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { size, ScreenWidth } from '../../util/utils.js'

class Setting extends Component {

  constructor(props) {
    super(props)
    this.state = {

    }
  }


  componentDidMount() {

  }


  render() {
    const { userInfo, dispatch } = this.props
    return (
      <Layout style={{ backgroundColor: '#0A0C21' }} statusStyle={{}}>
        <NavBar
          type="transparent"
          title="个人信息"
          back={true}
        />
        <ScrollView style={Style.content}>
          <View style={{ paddingHorizontal: 16, }}>
            <TouchableOpacity onPress={() => Actions.updataUser({ changeType: 'headImg' })}>
              <View style={{ flexDirection: 'row', alignItems: 'center', height: 60, }}>
                <View style={{ flex: 1 }}><Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, }}>头像</Text></View>
                <View style={{ marginRight: 10 }}>
                  <Image resizeMode='cover' source={{ uri: userInfo.headImg || '' }} style={{ width: 44, height: 44, borderRadius: 22, backgroundColor: '#fff' }} />
                </View>
                <View style={{}}>
                  <Icon name="ios-arrow-forward" size={14} color={'#fff'} style={{ marginRight: 8 }} />
                </View>
              </View>
            </TouchableOpacity>
            <View style={{ height: .5, backgroundColor: '#232B54' }} />
            <TouchableOpacity onPress={() => Actions.updataUser({ changeType: 'nickName' })}>
              <View style={{ flexDirection: 'row', alignItems: 'center', height: 60, }}>
                <View style={{ flex: 1 }}><Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, }}>昵称</Text></View>
                <View style={{ marginRight: 10 }}>
                  <Text style={{ fontSize: 14, color: '#ccc', lineHeight: 16, }}>{userInfo.nickName}</Text>
                </View>
                <View style={{}}>
                  <Icon name="ios-arrow-forward" size={14} color={'#fff'} style={{ marginRight: 8 }} />
                </View>
              </View>
            </TouchableOpacity>
            <View style={{ height: .5, backgroundColor: '#232B54' }} />
            <TouchableOpacity onPress={() => Actions.updataUser({ changeType: 'signature' })}>
              <View style={{ flexDirection: 'row', alignItems: 'center', height: 60, }}>
                <View style={{ flex: 1 }}><Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, }}>个性签名</Text></View>
                <View style={{ marginRight: 10 }}>
                  <Text style={{ fontSize: 14, color: '#ccc', lineHeight: 16, }}>{userInfo.signature}</Text>
                </View>
                <View style={{}}>
                  <Icon name="ios-arrow-forward" size={14} color={'#fff'} style={{ marginRight: 8 }} />
                </View>
              </View>
            </TouchableOpacity>
            <View style={{ height: .5, backgroundColor: '#232B54' }} />
          </View>
          <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingHorizontal: 40, paddingVertical: 30 }}>
            <TouchableOpacity
              onPress={() => {
                dispatch({
                  type: ActionTypes.setUserInfo,
                  data: {}
                })
                Actions.login()
                Actions.reset('login')
              }}
              style={{
                flex: 1,
                height: 40,
                backgroundColor: '#7484FF',
                borderRadius: 4,
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <Text style={{ fontSize: 16, color: '#fff', lineHeight: 20, }}>退出登录</Text>
            </TouchableOpacity>
          </View>
        </ScrollView>
      </Layout>
    );
  }
}


export default connect(({ userInfo }) => ({
  userInfo,
}))(pureRender(Setting))
